<template>
<div id="home">
  <nav-bar class="home-nav">
    <div slot="center">购物街</div>
  </nav-bar>
  <tab-control :title="['流行','新款','精选']" @tabClick="tabClick" ref="tabControl1" class="tab-control1" v-show="isTabFixed"></tab-control>

  <!--加入:时，后续的值是值，没有:时，统一看成是变量-->
  <scroll class="content" ref="scroll" :probeType="3" @scroll="contentScroll" :pull-up-load="true" @pullingUp="pullingUp">
    <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
    <recommend-views :recommends="recommends"></recommend-views>
    <feature-view></feature-view>
    <tab-control :title="['流行','新款','精选']" @tabClick="tabClick" ref="tabControl2"></tab-control>
    <good-list :goods="goods[currentType]"></good-list>
  </scroll>
  <back-top @click.native="backClick" v-show="isShow"></back-top>
</div>
</template>

<script>
//一、内容封装的组件
import HomeSwiper from '@/views/home/childComps/HomeSwiper'
import RecommendViews from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView'

//二、公共封装的组件
import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/content/backTop/BackTop'

//三、网络请求的方法
import {
  getHomeMultidata
} from 'network/home'
import {
  getHomeGoods
} from 'network/home'
import {
  debounce
} from 'common/utils'

export default {
  name: 'Home',
  components: {
    NavBar,
    HomeSwiper,
    RecommendViews,
    FeatureView,
    TabControl,
    GoodList,
    Scroll,
    BackTop,
  },

  data() {
    return {
      banners: [],
      recommends: [],
      //先定义好数据变量，等会儿网络请求到之后往里面塞，
      //下拉更新时，变更page和push list
      goods: {
        pop: {
          page: 0,
          list: [],
        },
        new: {
          page: 0,
          list: [],
        },
        sell: {
          page: 0,
          list: [],
        },
      },
      currentType: 'pop',
      isShow: false,
      tabOffsetTop: 0,
      isTabFixed: false,
      saveY: 0,
    }
  },
  //获取网络请求，还有network-home.js
  created() {
    //1.请求多个数据
    this.getHomeMultidata()
    //2.请求商品数据,先每样加载更一页
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  mounted() {
    //1.监听item中图片加载完成
    const refresh = debounce(this.$refs.scroll.refresh, 50)
    this.$bus.$on('itemImageLoad', () => {
      refresh()
    })
    //2.获取tabControl的offsetTop
    //所有的组件都有一个属性$el:用于获取组件中的元素
    //用offsetTop获取高度
  },
  methods: {
    //网络请求相关的方法
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        this.banners = res.data.banner.list
        this.recommends = res.data.recommend.list
        //console.log(res)
      })
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1
      getHomeGoods(type, page).then((res) => {
        //此时的res是type的第page页
        //往good数组中push入num1数组
        //good.push([1,3,4])是不行的
        //good.push(...num1)可以
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page += 1
        this.$refs.scroll.scroll.finishPullUp()
        //console.log(this.goods[type])
      })
    },
    //事件监听相关
    tabClick(index) {
      console.log('我实现了传数据')
      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
      this.$refs.tabControl1.currentIndex = index
      this.$refs.tabControl2.currentIndex = index
    },
    backClick() {
      //此处非常妙，获取scroll标签-里面的scroll数据-调用to方法
      this.$refs.scroll.scroll.scrollTo(0, 0, 500)
    },
    contentScroll(position) {
      //console.log(position)
      //1.判断backTop是否显示
      this.isShow = position.y < -1000
      //2.判断tabControl是否吸顶
      this.isTabFixed = -position.y > this.tabOffsetTop
      //console.log(this.isTabFixed)
    },
    pullingUp() {
      this.getHomeGoods(this.currentType)
      //重新计算高度！！！解决拖到一般不能拖的问题
    },
    swiperImageLoad() {
      //console.log('swiperImageLoad ok')
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
      //console.log(this.tabOffsetTop)
    },
  },
  //销毁
  destroyed() {
    console.log('home has been destoryed')
  },
  //加载
  activated() {
    //console.log('活跃中')
    this.$refs.scroll.scroll.scrollTo(0, this.saveY, 0)
    //防止bug
    this.$refs.scroll.refresh()
  },
  //离开
  deactivated() {
    this.saveY = this.$refs.scroll.scroll.y
    //console.log(this.saveY)
  },
}
</script>

<style scoped>
#home {
  /*视口高度view height*/
  height: 100vh;
  /*padding-top: 44px*/
  position: relative;
}

.home-nav {
  background-color: #ff8198;
  color: #fff;
  /* position: fixed;
  z-index: 9;
  width: 100%;
  left: 0;
  top: 0; */
}

.tab-control {
  /*真是开发很少用，因为是个新属性，适配很有问题 */
  /* position: sticky;
  top: 44px; */
  z-index: 9;
}

.content {
  position: absolute;
  top: 44px;
  bottom: 49px;
  overflow: hidden;
}

/* .content {
  height: calc(100%-93px);
  margin-top: 44px;
} */
/* .fixed {
  position: fixed;
  left: 0;
  top: 44px;
} */
.tab-control1 {
  /*设置定位之后，zindex才起作用*/
  position: relative;
  z-index: 99;
}
</style>
